<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>民主评测打分表</title>
    <script src="static/vue.js"></script>
    <script src="static/tpbase.js"></script>
    <link rel="stylesheet" href="static/tpbase.css">
    <style>
        span{
            display: inline-block;
        }
        .content{
            width: 100%;
        }
        .content1{
            width: 100%;
            height: 4.6rem;
            margin-top: .36rem;
            background-color: white;
            box-shadow: 0px 0px 6px 0px rgba(170, 170, 170, 1);
        }
        .c1{
            width: 100%;
            height: .7rem;
            line-height: .7rem;
            margin-top: .2rem;
        }
        .c1 span:nth-child(1){
            margin-left: .5rem;
            color: rgba(43, 117, 242, 1);
            font-size: .28rem;
        }
        .c1 span:nth-child(2){
            margin-left: .4rem;
            color: rgba(16, 16, 16, 1);
            font-size: .28rem;
        }
        .c2{
            width: 100%;
            height: .7rem;
            line-height: .7rem;
            display: flex;
        }
        .c21{
            margin: 0 .07rem 0 .64rem;
            color: rgba(43, 117, 242, 1);
            font-size: .28rem;

        }
        .c22{
            margin-left: .3rem;
            display: flex;

        }
        .labels{
            display: inline-block;
            width: .38rem;
            height: .38rem;
            border-radius: 50%;
            margin-top: .16rem;
            border: 1px solid #cccccc;
        }
        .labelsc {
            background-color: rgba(43, 117, 242, 1);
            background-image: url("imgs/勾.png");
            background-size: cover;
        }
        .inp{
            display: inline-block;
            width: .38rem;
            height: .38rem;
            opacity: 0;

        }
        .c2d{
            margin-left:  .15rem;
            color: rgba(16, 16, 16, 1);
            font-size: .28rem;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="top">
        <div class="head">
            <span class="back">×</span><span class="menu">···</span>
        </div>
        <div class="titles">
            <div class="title1">
                {{title}}
            </div>
            <div class="title2">
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content1" v-for="(item,index) in list">
            <div class="c1">
                <span>姓名</span><span>{{item.name}}</span>
            </div>
            <div class="c2" v-for="(item1,index1) in item.list1">
                <div class="c21">{{item1.name}}</div>
                <div class="c22" v-for="(item2,index2) in item1.list2">
                    <label class="labels" :class="{labelsc:item2.select}"
                           @click="selects(index,index1,index2)">
                        <input class="inp" type="radio" :name="item2.names">
                    </label>
                    <div class="c2d">{{item2.name}}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">提交</div>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        select:false,
        data:{
            title:"民主评测打分表",
            list:[//打分对象2个
                {
                    name:"瑞萌",
                    list1:[//打分项5个方面
                        {
                           name:"德",
                            list2:[//打分等级4个级别
                                {names:"1", name:"高", select:false},
                                {names:"1", name:"较高", select:false},
                                {names:"1", name:"一般", select:false},
                                {names:"1", name:"较差", select:false},
                            ]
                        },
                        {
                            name:"能",
                            list2:[//打分等级4个级别
                                {names:"2", name:"高", select:false},
                                {names:"2", name:"较高", select:false},
                                {names:"2", name:"一般", select:false},
                                {names:"2", name:"较差", select:false},
                            ]
                        },
                        {
                            name:"勤",
                            list2:[//打分等级4个级别
                                {names:"3", name:"高", select:false},
                                {names:"3", name:"较高", select:false},
                                {names:"3", name:"一般", select:false},
                                {names:"3", name:"较差", select:false},
                            ]
                        },
                        {
                            name:"绩",
                            list2:[//打分等级4个级别
                                {names:"4", name:"高", select:false},
                                {names:"4", name:"较高", select:false},
                                {names:"4", name:"一般", select:false},
                                {names:"4", name:"较差", select:false},
                            ]
                        },
                        {
                            name:"廉",
                            list2:[//打分等级4个级别
                                {names:"5", name:"高", select:false},
                                {names:"5", name:"较高", select:false},
                                {names:"5", name:"一般", select:false},
                                {names:"5", name:"较差", select:false},
                            ]
                        },
                    ]
                },
                {
                    name:"瑞萌萌",
                    list1:[//打分项5个方面
                        {
                            name:"德",
                            list2:[//打分等级4个级别
                                {names:"6", name:"高", select:false},
                                {names:"6", name:"较高", select:false},
                                {names:"6", name:"一般", select:false},
                                {names:"6", name:"较差", select:false},
                            ]
                        },
                        {
                            name:"能",
                            list2:[//打分等级4个级别
                                {names:"7", name:"高", select:false},
                                {names:"7", name:"较高", select:false},
                                {names:"7", name:"一般", select:false},
                                {names:"7", name:"较差", select:false},
                            ]
                        },
                        {
                            name:"勤",
                            list2:[//打分等级4个级别
                                {names:"8", name:"高", select:false},
                                {names:"8", name:"较高", select:false},
                                {names:"8", name:"一般", select:false},
                                {names:"8", name:"较差", select:false},
                            ]
                        },
                        {
                            name:"绩",
                            list2:[//打分等级4个级别
                                {names:"9", name:"高", select:false},
                                {names:"9", name:"较高", select:false},
                                {names:"9", name:"一般", select:false},
                                {names:"9", name:"较差", select:false},
                            ]
                        },
                        {
                            name:"廉",
                            list2:[//打分等级4个级别
                                {names:"10", name:"高", select:false},
                                {names:"10", name:"较高", select:false},
                                {names:"10", name:"一般", select:false},
                                {names:"10", name:"较差", select:false},
                            ]
                        },
                    ]
                }

            ]
        },
        methods:{
            selects(index,index1,index2){
                for (var i=0;i<this.list[index].list1[index1].list2.length;i++){
                    if (i==index2){
                        this.list[index].list1[index1].list2[i].select=true;
                    }
                    else {
                        this.list[index].list1[index1].list2[i].select=false;
                    }
                }
            },
        }
    });
</script>
</body>
</html>